<template>
  <div
    class="app-content"
    >
   <div class="app-seach-box">
      <SeachNav @search="searchOrder">
        <view class="app-filter_wrap">
          <screen
            isCityShow
            :filterMaskData.sync="filterMaskData"
			@filterBtnCall="filterQuery"
            @filterQuery="filterQuery">
          </screen>
        </view>
      </SeachNav>
	  </div>
    <!-- <app-filter-search
      v-model="from.keyword"
      @input="searchInp"
      @search="searchOrder"
      @filterShow="filterShowBtn"/>
    <app-slider-right
      :filter-mask-data.sync="filterMaskData"
      @filterQuery="filterQuery"
      v-model="filterShow"
      is-city-show /> -->
    <div class="title_text">全部订单({{ totalNum }})</div>
    <!-- 列表 -->
    <div class="list">
          <div
            class="list_item"
            v-for="(item, index) in list.data"
            :key="index">
            <div class="list_item_title">
              <div>
                <h3>{{ item.name }}</h3>
              </div>
              <!-- <div class="auxiliary_color_2">
                                <h3>{{ item.rush_price }}</h3>
                            </div> -->
              <!-- <span class="time" /> -->
            </div>
            <div class="list_item_info flex_wrap">
              <div class="info_list">
                <span class="list_item_label">联系电话：</span>
                <a
                  class="list_item_value"
                  style="color: #225FFF"
                  :href="`tel:${item.mobile_phone}`">{{ item.mobile_phone || '待确认' }}</a>
                <span class="auxiliary_color_2">（接单后可联系）</span>
              </div>
              <div
                v-if="!isVip"
                class="main_btn_com"
                @click="promptVipFn">联系客户</div>
                <!-- <a v-else class="main_btn_com" :tel="item.mobile_phone">联系客户</a> -->
            </div>

            <div class="list_item_info">
              <div class="info_list">
                <span class="list_item_label">地&#12288;&#12288;址：</span>
                <span class="list_item_value">{{ getDistrict(item.district_id).join('-') || '待确认' }} | {{ item.xiaoqu || '待确认' }}</span>
              </div>
            </div>
            <div class="list_item_info">
              <div class="info_list">
                <span class="list_item_label">户&#12288;&#12288;型：</span>
                <span
                  class="list_item_value"
                  v-if="item.house_shi == null">
                  待确认 |
                  {{
                    $util.isEmpty(item.square)?'待确认': item.square + '㎡'
                  }}
                </span>
                <span
                  class="list_item_value"
                  v-else>
                  {{ item.house_shi }}室{{ item.house_ting }}厅{{ item.house_chu }}厨{{ item.house_wei }}卫 |
                  {{
                    $util.isEmpty(item.square)?'待确认': item.square + '㎡'
                  }}
                </span>
              </div>
            </div>
            <div class="list_item_info">
              <div class="info_list">
                <span class="list_item_label">预&#12288;&#12288;算：</span>
                <span
                  class="list_item_value"
                  :class="{'auxiliary_color_2' : sysBudgetStatus[item.budget_type]}">{{ sysBudgetStatus[item.budget_type] || '待确认' }}</span>
              </div>
            </div>
            <div class="list_item_info sub_list_color">
              <div class="info_list">
                <span class="list_item_label">装修类型：</span>
                <span class="list_item_value">{{ sysRenovationStatus[item.renovation_type] || '待确认' }}</span>
              </div>
            </div>
            <div class="list_item_info sub_list_color">
              <div class="info_list">
                <span class="list_item_label">渠道来源：</span>
                <span class="list_item_value">{{ item.prebook_source || '待确认' }}</span>
              </div>
              
            </div>
            <div class="list_item_info sub_list_color">
              <div class="info_list">
                <span class="list_item_label">业主需求：</span>
                <span class="list_item_value">{{ item.remark || '待确认' }}</span>
              </div>
            </div>
            <div class="list_item_btn">
              <!-- <template v-if="!$util.isEmpty(item.prebook_sys_id) && item.prebook_sys_id > 0"> -->

              <!-- <router-link v-if="item.rush_status === 1"
                                :to="{name: 'grabOrderDetail',query: {create_user_id: item.create_user_id,prebook_id: item.prebook_id}}"
                                class="edit_btn subscribe_order">
                                可抢单
                            </router-link>-->
              <!-- <div class="left_wrap">
                                <div class="price">
                                    <span class="symbol">￥</span>
                                    <span>{{ item.rush_price }}</span>
                                </div>
                            </div>-->
              <div
                v-if="item.recruit_status === 0"
                class="edit_btn subscribe_order"
                @click="goPay(item)">接单</div>
              <div
                class="edit_btn"
                v-if="item.recruit_status === 3">已失效</div>
            </div>
          </div>
    </div>

    <navigator
      url="/pages/order/subscribeOrder?isOrderEnter=true"
      class="btn_bottom">
      查看已接客户
      </navigator>
    <open-VIP :show.sync="showVipPop" />
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
// import citySelect from '@/components/Public/citySelect'
// import OrderTab from './components/OrderTab'
import { apiCenter } from '@/api/center'
import { list, allOptions } from '@/mixins'
// import AppSliderRight from '@/components/Public/AppSliderRight'
// import openVIP from '@/components/Public/Dialog/openVIP'
// import AppFilterSearch from '@/components/Public/Module/AppFilterSearch'
import SeachNav from '@/pages/components/SeachNav.vue'
import screen from '@/components/App_screen.vue'
import openVIP from '@/pages/components/dialog/openVIP'
export default {
	name: 'ConnectOrderList',
	mixins: [list, allOptions],
	components: {
		openVIP,
		screen,
		SeachNav
	},
	computed: {
		...mapState({
			owner_user_id: state => state.user.user.user_id,
			isVip: state => state.user.user.vip_level > 0
		}),
		...mapGetters({ userInfo: 'getUser' })
	},
	data() {
		return {
			totalNum: 0,
			tabIndex: 0,
			tabData: [
				// { name: '全部', follwoUpStatus: 1, total: 0 },
				{ name: '可接订单', follwoUpStatus: 2, total: 0 }
			],
			showVipPop: false,
			// 筛选弹窗
			filterShow: false,
			from: {
				keyword: '',
				// rush_type: '',
				// create_start: '',
				// create_end: '',
				// prebook_source_type: '',
				status: '',
				province_id: '',
				city_id: '',
				district_id: '',
				renovation_type: '',
				budget_type: '',
				recruit_status: '0,3',
				prebook_source_type: 2
			},
			pastParams: {},
			filterMaskData: [
				{
					title: '当前阶段',
					type: 2,
					key: 'status',
					list: []
				},
				/*{
					title: '装修类型（多选）',
					key: 'renovation_type',
					type: 2,
					list: []
				},*/
				{
					title: '装修预算',
					key: 'budget_type',
					list: []
				}
			],
			canPay: false
		}
	},
	mounted() {
		this.init()
		this.getOptions()
	},
  	onPullDownRefresh() {
		// this.list.loading = true
		this.resetList()
		this.init().then(() => {
			uni.stopPullDownRefresh()
		})
	},
	onReachBottom() {
		if (this.list.loading) {
			return
		}
		if (this.list.data.length < this.list.total) {
      	// this.list.loading = true
			this.init().then(res => {
				uni.stopPullDownRefresh()
			})
		} else {
			uni.stopPullDownRefresh()
			uni.showToast({
				title: '没有更多了',
				duration: 2000,
				icon: 'none'
			})
		}
	},
	methods: {
		getOptions() {
			// sysBudgetStatus 预算   sysRenovationStatus 装修类型  sysBookingStatus 派单状态
			this.filterMaskData[0].list = this.formatOptions(this.sysBookingStatus)
			this.filterMaskData[1].list = this.formatOptions(this.sysRenovationStatus)
			this.filterMaskData[2].list = this.formatOptions(this.sysBudgetStatus)
		},
		goPay(item) {
			if (!this.isVip) {
				this.showVipPop = true
				return
			}
			// const {
			//   prebook_id, name, mobile_phone, district_id, xiaoqu, house_shi, house_ting, house_yang, house_wei, house_chu, square, create_user_id,rush_pay_type
			// } = item;
			const { rush_pay_type, prebook_id, owner_user_id } = item

			const params = {
				prebook_id,
				pay_type: rush_pay_type == 1 ? 'points' : 'price'
			}
			apiCenter.getSubscribeReceipt({ prebook_id }).then((res) => {
				if (res.status === 'success') {
					uni.showToast({
						title: '接单成功',
						icon: 'none'
					})
					setTimeout(() => {
						this.init()
					}, 500)

					// const { rush_price, rush_points, seller_money, pay_points } = res.data
					// if (rush_pay_type == 1) {
					//     if (this.$util.isEmpty(pay_points) || parseFloat(pay_points) < parseFloat(rush_points)) {
					//         this.canPay = false
					//     } else {
					//         this.canPay = true
					//     }
					// } else if (this.$util.isEmpty(seller_money) || parseFloat(seller_money) < parseFloat(rush_price)) {
					//     this.canPay = false
					// } else {
					//     this.canPay = true
					// }

					// if (!this.canPay) {
					//     if (rush_pay_type == 1) {
					//         this.$toast('积分不足')
					//         setTimeout(() => {
					//             this.$router.push({
					//                 name: 'MyMission'
					//             })
					//         }, 1000)
					//     } else {
					//         this.$toast('余额不足，请充值')
					//         setTimeout(() => {
					//             this.recharge()
					//         }, 1000)
					//     }
					// } else {
					//     apiCenter.payGrabOrder(params).then(res => {
					//         if (res.status === 'success') {
					//             const data = res.data
					//             const pastParams = {
					//                 name: data.name,
					//                 mobile_phone: data.mobile_phone,
					//                 xiaoqu: data.xiaoqu,
					//                 house_type: `${data.house_shi}房${data.house_ting}厅${data.house_yang}阳${data.house_wei}卫${this.$util.isEmpty(data.house_chu) ? 0 : data.house_chu}厨`,
					//                 square: `${data.square}㎡`,
					//                 create_user_id: data.create_user_id,
					//                 district: this.getDistrict(data.district_id).join('-')
					//             }
					//             this.$router.push({
					//                 name: 'grabOrderSucc',
					//                 query: pastParams
					//             })
					//         } else {
					//             this.$toast(res.errors.message)
					//         }
					//     })
					// }
					// this.$router.push({
					//   name: 'grabOrderPay',
					//   query: {
					//     owner_user_id: this.owner_user_id,
					//     prebook_id,
					//     pastParams: this.pastParams,
					//   },
					// });
				} else {
					uni.showToast({
						title: res.errors.message,
						icon: 'none'
					})
				}
			})
		},
		// formatStatus(val, type) {
		// 	return val
		// 		.split('')
		// 		.map((i) => {
		// 			if (!this[type][i]) {
		// 				return '无'
		// 			}
		// 			return this[type][i]
		// 		})
		// 		.join('、')
		// },
		switchTab(val) {
			this.from.rush_type = val.follwoUpStatus
			this.resetList()
			this.init()
		},
		filterShowBtn() {
			this.filterShow = true
		},

		filterQuery(item) {
			this.resetList()
			this.from = {
				...this.from,
				...item.form
			}
			this.init()
		},
		searchOrder(val) {
			this.from.keyword = val
			this.resetList()
			this.init()
		},
		// searchInp(val) {
		// 	this.from.keyword = val
		// },
		init() {
			return apiCenter
				.connectOrderList({
					...this.from,
					page: this.list.page
				})
				.then((res) => {
          	this.completes(res)
					// if (res.status == 'success') {
					// 	// this.tabData[0].total = res.data.count.all_rush;
					// 	// this.tabData[0].total = res.data.total
					// 	this.totalNum = res.data.total
					// 	this.list.data = this.list.page === 1 ? res.data.data : this.list.data.concat(res.data.data)
					// 	this.list.total = res.data.total
					// 	if (!this.$util.isEmpty(this.totalPages) && this.totalPages <= this.list.page) {
					// 		this.list.finished = true
					// 	}
					// } else {
					// 	this.list.finished = true
					// 	this.$toast(res.errors.message)
					// }
				})
		},
		// onRefresh() {
		// 	this.resetList(true)
		// 	this.init().then((res) => {
		// 		this.list.isLoading = false
		// 	})
		// },
		// onLoad() {
		// 	if (this.$util.isEmpty(this.totalPages) && this.list.page == 1) return

		// 	if (!this.$util.isEmpty(this.totalPages) && this.totalPages <= this.list.page) {
		// 		this.list.loading = false
		// 		this.list.finished = true
		// 	} else {
		// 		++this.list.page
		// 		this.init()
		// 	}
		// },
		// goTo() {
		// 	this.$router.push({
		// 		name: 'SubscribeOrderEdit',
		// 		query: {
		// 			status: 'add'
		// 		}
		// 	})
		// },
		promptVipFn() {
			this.showVipPop = true
		}
	}
}
</script>

<style lang="scss" scoped>
.app-content {
    .title_text {
        font-size: 26px;
        color: $fontColor2;
        margin-top: 30px;
        margin-left: 30px;
    }
    .tab_wrap {
        height: 100px;
        .tab_content {
            justify-content: flex-start !important;
            height: 100%;
            .tab_item {
                height: 100%;
                flex: 0 1 auto !important;
                &:nth-child(1) {
                    margin-left: 39px;
                }
                &:nth-child(2) {
                    margin-left: 51px;
                }
                .tab_title {
                    padding-top: 20px;
                }
                &.active &::after {
                    bottom: 0 !important;
                }
            }
        }
        .filter_wrap {
            height: 100%;
            .txt {
                margin-bottom: 19px;
            }
        }
    }
    .btn_bottom {
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        height: 100px;
        line-height: 100px;
        text-align: center;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px -3px 10px 0px rgba(0, 0, 0, 0.1);
        font-size: 32px;
        color: rgba(255, 105, 0, 1);
    }
}

.tab_num {
    padding-top: 14px !important;
}
.app-ontent {
    background-color: #f5f5f5;
}
.list {
    padding-bottom: 90px;
    .list_item {
        border-radius: 20px;
        // font-weight: 600;
        margin: 20px 30px 20px;
        padding: 1px 30px 20px;
        background-color: #fff;
        color: $fontColor2;
        position: relative;
        .list_item_title {
            margin: 40px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #333;
            .list-head {
                line-height: 36px;
                color: #999999;
                max-width: 480px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                & > span {
                    font-size: 24px;
                    color: #333333;
                }
            }
            .time {
                font-size: 24px;
                color: rgba(153, 153, 153, 1);
            }
            & h3 {
                font-size: $fontSize34;
                font-weight: 600;
                flex: 1;
            }
        }
        .info_list {
            margin-bottom: 20px;
            .list_item_label {
                color: #333;
                // color: $fontColor3;
            }
            & .list_item_value {
                & > span {
                    color: #ff6900;
                }
            }
        }
        .sub_list_color {
			.list_item_label,.list_item_value {
				color: $fontColor3;
			}
        }
        .list_item_btn {
            display: flex;
            // justify-content: flex-end;
            justify-content: space-between;
            align-items: center;
            .left_wrap {
                display: flex;
                .price {
                    font-size: 38px;
                    color: #ff6900;
                    display: flex;
                    align-items: flex-end;
                    .symbol {
                        font-size: 24px;
                    }
                }
            }
            .edit_btn {
                color: rgba(255, 255, 255, 1);
                font-size: 30px;
                padding: 15px 30px;
                border-radius: 50px;
                font-weight: 400;
                border: 0.5px solid #ddd; /*no*/
                margin: 0 10px;
                background-color: rgba(204, 204, 204, 1);
                text-align: center;
                flex: 1;
                &.subscribe_order {
                    color: #3a1b04;
                    border: 0.5px solid $mainColor; /*no*/
                    background-color: $mainColor;
                }
            }
        }
        .list_item_icon {
            position: absolute;
            top: 20px;
            right: 30px;
            img {
                width: 104px;
                height: 104px;
            }
        }

        .flex_wrap {
            @include direction(center, space-between);
            .main_btn_com {
                font-size: 24px;
                padding: 8px 20px;
                margin-bottom: 10px;
            }
        }
    }
}
</style>
